<template>
	<router-link class="content-ranking-element" :to="'/' + data.type + '/' + data.id">
		<p class="content-ranking-element_top">
			<span class="content-ranking-element_top-title">{{ data.title }}</span>
			<span v-if="data.labels && data.labels.length > 0 && is_tag" class="content-ranking-element_top-tag">
				<iv-tag v-for="item in data.labels" :key="item.id" :color="item.id | mapTagColor">{{ item.name }}</iv-tag>
			</span>
		</p>
		<p class="content-ranking-element_content">{{ data.description | filterHtml | textLineBreak(60) }}</p>
		<p class="content-ranking-element_bottom">
			<span class="content-ranking-element_bottom-time">{{ data.createTime | socialDate }}</span>
			<span class="content-ranking-element_bottom-like">
				<a :class="{ 'content-ranking-element_bottom-ceil': isCeilingHandler(data.likeNum) }">
					<iv-icon type="ios-heart-outline"></iv-icon>
					{{ digitalCeilingHandler(data.likeNum) }}
				</a>
			</span>
			<span class="content-ranking-element_bottom-comment">
				<a :class="{ 'content-ranking-element_bottom-ceil': isCeilingHandler(data.commentNum) }">
					<iv-icon type="ios-text-outline"></iv-icon>
					{{ digitalCeilingHandler(data.commentNum) }}
				</a>
			</span>
			<span class="content-ranking-element_bottom-read">
				<a :class="{ 'content-ranking-element_bottom-ceil': isCeilingHandler(data.readNum) }">
					<iv-icon type="ios-eye-outline"></iv-icon>
					{{ digitalCeilingHandler(data.readNum) }}
				</a>
			</span>
		</p>
	</router-link>
</template>

<script>
export default {
	props: {
		// 数据
		data: {
			type: Object,
			default: () => [
				{
					urlType: 'url类型',
					linkId: '数据id',
					title: '标题',
					labels: [{ id: '0', name: '标签' }],
					description: '备注',
					createTime: 1610256505654,
					likeNum: 10, // 喜欢数
					commentNum: 3, // 评论数
					readNum: 100 // 查看数
				}
			]
		},
		// 是否显示标签
		is_tag: {
			type: Boolean,
			default: false
		},
		// 数字上限
		overflow_count: {
			type: Number,
			default: 10000
		}
	},
	created() {
	},
	methods: {
		// 是否到达限值
		isCeilingHandler(num = 0) {
			return num >= this.overflow_count;
		},
		// 计算数字上限值
		digitalCeilingHandler(num = 0) {
			if (num <= this.overflow_count) {
				return num;
			}

			return this.overflow_count + '+';
		}
	}
};
</script>

<style lang="scss">
.content-ranking-element {
	display: block;
	overflow: hidden;
	&:hover {
		.content-ranking-element_top-title {
			color: $default-title-hover-color;
		}
	}

	&_top {
		margin-bottom: 10px;
		&-title {
			text-align: justify;
			color: $default-title-color;
			font-size: 16px;
			line-height: 23px;
		}
		&-tag {
			display: inline-block;
			margin-left: 10px;
			div {
				padding: 3px;
				height: 15px;
				line-height: 10px;
			}
			span {
				font-size: 10px;
				padding-left: 2px;
			}
		}
	}
	&_content {
		text-align: justify;
		color: $color-secondary-info;
		font-size: 13px;
		line-height: 20px;
	}
	&_bottom {
		margin: 5px 0 0;
		span {
			font-size: 13px;
			line-height: 18px;
			font-weight: 100;
			color: $color-secondary-info;
			+ span {
				float: right;
				margin-left: 10px;
			}
		}
		a {
			cursor: pointer;
			display: inline-block;
			color: $default-link-color;
			&:hover {
				color: $color-main-primary;
			}
		}
		&-ceil {
			color: $color-secondary-danger !important;
		}
	}
}
</style>
